<template>
  <TablePage>
    <template #top>
      <SearchForm
        title="服务报表"
        :keyword-search-data="[{ key: 'collector', label: '收费员名称' }]"
        :select-data="selectData"
        @search="search"
      >
        <template #extraButtons>
          <a-button class="mr-2" type="primary" ghost @click="exportUser">导出</a-button>
        </template>
      </SearchForm>
    </template>
    <SlTable
      :columns="columns"
      row-key="collectorId"
      :data-source="tableData"
      :pagination="pagination"
      :loading="tableLoading"
    >
      <!-- <template #bodyCell="{ column, record }">
        
      </template> -->
    </SlTable>
  </TablePage>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { useCURD } from "/@/hooks/useCURD";
import { downloadFile, handleDateRowRender } from "/@/utils/common";
import { FormItemComponentType, CURDAction } from "/@/components/CURDDialog/models";
import type { FormItemData, OperItem, ShowCURDModalOptions } from "/@/components/CURDDialog/models";
import type { TableProps } from "ant-design-vue";
import { PatternKey } from "/@/utils/verify";
import type { ServiceReportItem, PartialServiceReportItem } from "/@/api/main/statisticalReport/models";
import { Api } from "/@/api/main/statisticalReport";
import { exportReq } from "/@/api/common";
import { DEFAULT_IMG_BASE64_STR } from "/@/utils/file";
import { LabelSelectType } from "/@/types/components";

const { t } = useI18n();
const columns = ref<TableProps<ServiceReportItem>["columns"]>([
  {
    title: "班组",
    dataIndex: "teamName",
  },
  {
    title: "收费员",
    dataIndex: "collector",
  },
  {
    title: "总次数",
    dataIndex: "totalTimes",
  },
  {
    title: "合格次数",
    dataIndex: "qualifiedTimes",
  },
  {
    title: "合格率",
    dataIndex: "qualifiedRate",
  },
  {
    title: "微笑合格率",
    dataIndex: "smileRate",
  },
  {
    title: "迎车合格率",
    dataIndex: "welcomeRate",
  },
  {
    title: "送车合格率",
    dataIndex: "deliveryRate",
  },
  {
    title: "文明用语合格率",
    dataIndex: "termRate",
  },
]);
function search(model) {
  if (model.dateRange) {
    let start = model.dateRange[0];
    let end = model.dateRange[1];
    start = start.split(" ")[0] + " 00:00:00";
    end = end.split(" ")[0] + " 23:59:59";
    model.startTime = start;
    model.endTime = end;
    delete model.dateRange;
  } else if (model.dateRange === null) {
    model.startTime = null;
    model.endTime = null;
  }
  // console.log(model);
  // reloadTable({ model });
}

const { pagination, tableData, tableLoading, curd, reloadTable } = useCURD<PartialServiceReportItem>({
  getDataUrl: Api.serviceReport,
});

const selectData = [
  {
    label: "收费时间",
    key: "dateRange",
    selectType: LabelSelectType.rangePicker,
    props: {
      // showTime: {
      //   format: "HH:mm:ss",
      // },
      showTime: false,
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD",
    },
  },
];

async function exportUser() {}
</script>
